(defpackage :page-content
  (:use :cl)
  (:import-from :action-examples :define-action-examples)
  (:import-from :data-display-examples :define-data-display-examples)
  (:export
   ))

(in-package :page-content)


(defun define-header ()
  (spinneret:with-html
    (:meta :charset "utf-8")
    (:meta :name "viewport" :content "width=device-width, initial-scale=1")
    (:meta :http-equiv "content-type" :content "text/html; charset=UTF-8")
    (:meta :http-equiv "Cache-Control" :content "no-cache, no-store, must-revalidate")
    (:meta :name "description" :content "daisyUI examples in Common Lisp")
    (:script (:raw
              "try {
    document.documentElement.setAttribute('data-theme', localStorage.getItem('theme'))
    } catch (e) { }"))
    ;;(:script :src "https://cdn.tailwindcss.com")
    ;;(:link :href "https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" :rel "stylesheet" :type "text/css")
    (:script :src "https://unpkg.com/htmx.org@2.0.2" :integrity "sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" :crossorigin "anonymous")
    (:link :href "/static/output.css" :rel "stylesheet" :type "text/css")
    (:title "CL for daisyUI")
    ))


(defun define-right-navbar ()
  (spinneret:with-html
    (:div :class "bg-base-100 text-base-content sticky top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-shadow duration-100 [transform:translate3d(0,0,0)]"
          (:nav :class "navbar w-full"
                (:div :class "flex flex-1 md:gap-1 lg:gap-2"
                      ;; Hamburger menu
                      (:span :class "tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)]" :data-tip "Menu"
                             (:label :aria-label "Open menu" :for "drawer" :class "btn btn-square btn-ghost drawer-button lg:hidden" "☰"))
                      ;; left components in the leftside of the navbar
                      )
                ;; right components in the rightside of the navbar
                (:div :class "flex-0"
                      ;; buttons, hidden in small screens
                      (:div :class "hidden flex-none items-center lg:block"
                            (:a :class "btn btn-ghost drawer-button font-normal" :href "/components" "Components"))
                      (:div :class "hidden flex-none items-center lg:block"
                            (:a :class "btn btn-ghost drawer-button font-normal" :href "/store" "Store"))
                      ;; not hidden but change style in small screens
                      (:div :title "Change Language" :class "dropdown dropdown-end"
                            (:div :tabindex "0" :role "button" :class "btn btn-ghost" :aria-label "Language" "语言"))
                      (:div :title "See Version" :class "dropdown dropdown-end"
                            (dui:dropdown/css-focus "dropdown"
                                (:div :tabindex "0" :role "button" :class "link link-hover inline-block font-mono text-xs" "Version")
                              (:ul :tabindex "0" :class "dropdown-content menu menu-sm bg-base-200 rounded-box mt-7 w-36 border border-white/5 p-2 shadow-2xl outline outline-1 outline-black/5"
                                   (:li (:a :href "/changelog/" "Changelog"))
                                   (:li) ; empty <li> has not styled yet
                                   (:li (:a :target "_blank" :rel "noopener, noreferrer" :href "/ver/3" "Version 3.x"))
                                   (:li (:a :target "_blank" :rel "noopener, noreferrer" :href "/ver/2" "Version 2.x"))
                                   (:li)
                                   (:li (:a :target "_blank" :rel "noopener, noreferrer" :href "/Roadmap" "Roadmap"))))))
                ;; more right components below
                ))))


#+:ignore
;; not used
(defun define-body ()
  (spinneret:with-html
    (:article :class "prose max-w-none" ; https://github.com/tailwindlabs/tailwindcss-typography
              (:div
               (:h1 "Components")
               (:div
                (:h2 "Actions")
                (define-action-examples))
               (:div
                (:h2 "Data Display")
                (define-data-display-examples))
              ))))


(defun define-page ()
  (spinneret:with-html-string
    (:doctype)
    ;; https://daisyui.com/docs/themes/
    (:html :lang "zh-CN" :data-theme "corporate" :style "scroll-padding-top: 5rem; scroll-behavior: smooth;"
           (:head
            (define-header))
           (:body
            (:div
             (:div :class "bg-base-100 drawer lg:drawer-open"
                   (:input :id "drawer" :type "checkbox" :class "drawer-toggle")
                   ;; right column
                   (:div :class "drawer-content"
                         ;; right navbar in the right top
                         (define-right-navbar)
                         ;; right contents
                         (:div :class "max-w-[100vw] px-6 pb-16 xl:pr-2"
                               (:div :class "flex flex-col-reverse justify-between gap-6 xl:flex-row"
                                     (:div :class "prose prose-sm max-w-none md:prose-base w-full max-w-4xl flex-grow pt-10"
                                           (:h1 "Examples of common lisp with daisyUI")
                                           (define-action-examples)
                                           (define-data-display-examples))))
                         )
                   ;; left column
                   (:div :class "drawer-side z-40" :style "scroll-behavior: smooth; scroll-padding-top: 5rem;"
                         (:label :for "drawer" :class "drawer-overlay" :aria-label "Close menu")
                         (:aside :class "bg-base-100 min-h-screen w-80"
                                 ;; left navbar in the lefttop
                                 (:div :class "bg-base-100 sticky top-0 z-20 hidden items-center gap-2 bg-opacity-90 px-4 py-2 backdrop-blur lg:flex"
                                       (:a :href "/" :aria-current "page" :aria-label "Homepage" :class "flex-0 btn btn-ghost px-2"
                                           (:div :class "font-title inline-flex text-lg md:text-2xl" "CL daisyUI"))
                                       ;; add another here
                                       )
                                 (:div :class "h-4")
                                 (:ul :class "menu px-4 py-0"
                                      (:li)
                                      (:li (:details :id "disclosure-docs" :open ""
                                                     (:summary :class "group" (:span "🕮") "Docs")
                                                     (:ul (:li (:a :class "group active" :href "/docs/install/" (:span "Install")))
                                                          (:li (:a :class "group       " :href "/docs/use/"     (:span "Use")))
                                                          (:li (:a :class "group       " :href "/docs/customize/" (:span "Customize")))
                                                          (:li (:a :class "group       " :href "/docs/config/" (:span "Config"))))))
                                      (:li (:details :id "disclosure-components" :open ""
                                                     (:summary :class "group" (:span "🫧") "Components")
                                                     (:ul (:li (:h2 :class "menu-title flex items-center gap-4 px-1.5"
                                                                    (:span :class "text-base-content" "⚝") "Actions")
                                                               (:ul (:li (:a :class "group" :href "/components/button/" (:span "Button")))
                                                                    (:li (:a :class "group" :href "/components/dropdown/" (:span "Dropdown")))
                                                                    (:li (:a :class "group" :href "/components/modal/" (:span "Modal")))
                                                                    (:li (:a :class "group" :href "/components/Swap/" (:span "Swap")))))
                                                          (:li (:h2 :class "menu-title flex items-center gap-4 px-1.5"
                                                                    (:span :class "text-base-content" "⚝") "Data display")
                                                               (:ul (:li (:a :class "group" :href "/components/button/" (:span "Button")))
                                                                    (:li (:a :class "group" :href "/components/dropdown/" (:span "Dropdown")))
                                                                    (:li (:a :class "group" :href "/components/modal/" (:span "Modal")))
                                                                    (:li (:a :class "group" :href "/components/Swap/" (:span "Swap"))))))))
                                      ;; add divide line
                                      (:li :style "--tw-bg-opacity: 1; background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); opacity: .1; margin: .5rem 1rem; height: 1px;")
                                      (:li (:a :class "group from-primary to-primary/0 hover:to-primary/10 from-[-200%] to-60% [background-image:linear-gradient(-35deg,var(--tw-gradient-stops))]"
                                               :href "/store/"
                                               (:span :class "group-hover:text-primary transition-colors" "⚡")
                                               (:span "Store")
                                               (:span :class "badge badge-sm font-mono text-opacity-70 bg-primary/10 text-[inherit] border-transparent uppercase font-sans font-bold" "New")))
                                      (:li (:a :class "group"
                                               :href "/blog/"
                                               (:span "🤍")
                                               (:span "Blog")))
                                      ;; more lists below
                                      ;; ...
                                      )
                                 )) ; finish left column
                   ))))))


(easy-routes:defroute page-index ("/content" :method :get) ()
  "Return a web page with a list of project tables related with the project id and the session user."
  (define-page))
